<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SQ</title>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/bootstrap/css/bootstrap.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"/>
    <script src="lib/echarts/echarts.js"></script>

    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/index.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#index" data-toggle="tab">
            首页
        </a>
    </li>
    <li><a id="myCart" href="#cart" data-toggle="tab">购物车</a></li>
    <li><a href="#orders" data-toggle="tab">订单</a></li>
    <li><a href="#address" data-toggle="tab">地址</a></li>
    <div id="tip">

    </div>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="index">
        <div id="title">
            <div id="search">
                <div id="word">
                    简单·健康·分析
                </div>
                <input type="text" id="searchFood" input-lg>
                <button class="btn btn-info" id="searchbtn">查询</button>
            </div>
        </div>
        <br/>
        <div id="top">
            <table class="table table-striped recommendTable">
                <thead>
                <tr>
                    <th>TOP</th>
                    <th>菜品</th>
                </tr>
                </thead>
                <tbody>
                <!--菜品展示-->

                </tbody>
            </table>
        </div>

        <div class="well" id="typeList">
            美食分类:
            <ul class="list-unstyled list-inline" id="type">

            </ul>

        </div>
        <br/>
        <div>
            <div class="well" id="foodList">

            </div>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                食物详情
                            </h4>
                        </div>
                        <div class="modal-body">
                            <input type="text" id="foodid" hidden/>
                            <input type="text" id="price" hidden/>
                            <div id="toptip">
                                <div id="leftimg">

                                </div>
                                <div id="righttip">
                                    <div id="modalName">

                                    </div>
                                    <br/>
                                    <div id="modalPrice">

                                    </div>
                                    <br/>
                                    <div id="modalCalorie">

                                    </div>
                                </div>
                            </div>
                            <div id="bottomtip">
                                <div id="modalRemarks">

                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            购买数量<input type="number" min="1" max="100" value="1" id="num"/>
                            <button type="button" class="btn btn-primary" id="addCart">
                                加入购物车
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div>
                <!-- /.modal -->
            </div>
        </div>
        <!--分页-->
        <div id="Pagination">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-lg" id="page">
                    <li>
                        <a href="#" value="1" id="beginPage">
                            <span aria-hidden="true" value="1">初始页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" aria-label="Previous" value="1" id="previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <li id="right" disabled="false">
                        <a href="#" aria-label="Next" value="1" id="next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <!--分页结束-->

        <a href="tencent://message/?Menu=yes&uin=1353130279& Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45">
            QQ联系商家
        </a>

    </div>

    <div class="tab-pane fade " id="cart">
        <br/>
        <br/>
        <div class="zyk">
         <div class="x">X</div>
            <div id="ordersinfo">
                <!-- Table -->
                <table class="table table-hover ordersinfoTable">
                    <thead>
                    <tr>
                        <th>菜品名称</th>
                        <th>数量</th>
                        <th>价格</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--订单详情展示-->

                    </tbody>
                </table>
            </div>
             总价：￥<span class="total_price"></span>
            <button class="btn btn-default payBtn"  >付款</button>
        </div>
        <div class="well" id="cartList">

            <!-- Table -->
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>X</th>
                    <th>实拍</th>
                    <th>名称</th>
                    <th>份数</th>
                    <th>单价</th>
                    <th>总价</th>
                    <th>最后更新</th>
                    <th>操作</th>

                </tr>
                </thead>
                <tbody>
                <!--菜品展示-->

                </tbody>
            </table>
            <div id="pay">
                <input type="checkbox" id="checkall">全选!&nbsp;&nbsp;
                <input type="button" class="btn btn-danger" value="删除选中项"/>
                <input type="button" class="btn btn-default" value="结算选中项" id="payfor" data-toggle="modal" data-target="#myModal3"/>
            </div>
        </div>
    </div>
    <div class="tab-pane fade " id="orders">
       <br/>
        <br/>
        <div class="zyk">
            <div class="x">X</div>
            <div id="ordersIteminfo">
                <!-- Table -->
                <table class="table table-hover ordersItemTable">
                    <thead>
                    <tr>
                        <th>菜品名称</th>
                        <th>数量</th>
                        <th>价格</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--订单详情展示-->

                    </tbody>
                </table>
            </div>
        </div>
        <div class="well" id="ordersList">

            <!-- Table -->
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>订单号</th>
                    <th>联系手机号</th>
                    <th>用户</th>
                    <th>订单金额</th>
                    <th>配送地址</th>
                    <th>下单时间</th>
                    <th>订单状态</th>
                    <th>查看订单详情</th>
                </tr>
                </thead>
                <tbody>
                <!--订单展示-->

                </tbody>
            </table>
        </div>
    </div>
    <div class="tab-pane fade " id="address">
        <br/>
        <br/>
        <div id="dzgl">地址管理</div>
        <div class="well" id="addressList">
            <div id="addresss">
                无
            </div>
            <div id="xg">
                <div id="xga">

                </div>
                <!--<a data-whatever=jsonObj.foodId data-toggle="modal" data-target="#myModal2">修改</a>-->
                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel2">
                                    地址详情
                                </h4>
                            </div>
                            <div class="modal-body">
                                <div id="addressInfo">
                                    <input type="text" id="userId"  hidden/>
                                    手机号：<input type="text" id="phone" class="form-control" disabled/><br/>
                                    用户名：<input type="text" id="username" class="form-control" disabled/><br/>
                                    位置： <select name="addressType" class="form-control" input-lg
                                                id="schoolAddress"></select><br/>
                                    详细地址: <textarea name="remarks" placeholder="140字以内"
                                                    class="form-control" id="addressDetail"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" id="conf">
                                    确定
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div>
                    <!-- /.modal -->
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>